<template>
	<view>
		<view class="head">
			<view class="head_left" @tap="back()">
				<image src="../../../static/wode/return.png" mode=""></image>
				<text>取消</text>
			</view>
			<view class="head_mid">
				创建班级
			</view>
			<view class="head_right">

			</view>
		</view>
		<view class="padding-box">
			<view class="body-item">
				<text>讨论组名称</text>
				<input class="passText" type="text" value="" maxlength="20" placeholder="请输入" v-model="group_name" />
			</view>
			<view class="body-item">
				<text>使用语言</text>
				<view class="body-right" @tap="toLanuage">
					<text v-if="language==''">请选择</text>
					<text v-else>{{language}}</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
			<view class="body-item" @tap="toLabel">
				<text>标签</text>
				<view class="body-right">
					<text v-if="Theme_item==''&&Theme_name==''">请选择</text>
					<text v-else>{{Theme_name}}/{{Theme_item}}</text>
					<image src="../../../static/right.png" mode=""></image>
				</view>
			</view>
		</view>
	
		<view class="margin-box body-item2">
			<view class="">
				类别
			</view>
			<view class="type-box">
				<view class="type-item" v-for="(item,index) in typeList" :key="index" :class="{active:index==typeIndex}" @tap="chooseIndex(index)">
					{{item}}
				</view>
			</view>
		</view>
	
		<view class="class-room-promise">
			<h3>课堂公约</h3>
			<text>
				1.创建群聊需要消耗100猫币，从收益中扣除，无收益不扣除
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				language:'',
				Theme_item:'',
				Theme_name:'',
				typeList:['语音直播课堂', '视频直播课堂'],
				typeIndex:2
			}
		},
		onShow() {
			if (uni.getStorageSync('motherLanguage')) {
				this.language = uni.getStorageSync('motherLanguage').join('/')
			}
			if (uni.getStorageSync('Theme_name') != undefined || uni.getStorageSync('Theme_name') != '') {
				this.Theme_name = uni.getStorageSync('Theme_name')
			}
			if (uni.getStorageSync('Theme_item') != undefined || uni.getStorageSync('Theme_item') != '') {
				this.Theme_item = uni.getStorageSync('Theme_item')
			}
		},
		methods: {
			back() { //返回
				uni.navigateBack({
					delta: 1
				})
			},
			toLanuage() {
				uni.navigateTo({
					url: '/pages/Other/countrySelect/countrySelect?type=语言学习&kind=mother'
				})
			},
			toLabel() {
				uni.navigateTo({
					url: '../../../pages/My/selectClassTheme/selectClassTheme'
				})
			},
			chooseIndex(index){
				this.typeIndex = index
			}
		}
	}
</script>

<style scoped>
	.head {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: 128upx;
		background: #ffffff;
		padding: 0 24upx;
		z-index: 200;
		position: fixed;
		top: 0;
	}

	.head image {
		width: 20upx;
		height: 36upx;
		margin-right: 9upx;
	}

	.head_left {
		height: 82upx;
		width: 106upx;
		display: flex;
		align-items: center;
		line-height: 82upx;
		color: #666666;
		font-size: 32upx;

	}

	.head_right {
		width: 106upx;
	}
	.padding-box {
		padding-top: 182upx;
	}
	
	.body-item {
		background: #FFFFFF;
		padding: 0 24upx;
		border-bottom: 1upx solid #E6E6E6;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 88upx;
		font-size: 32upx;

	}
	
	.body-item image {
		width: 16upx;
		height: 28upx;
		margin-left: 30upx;
	}
	.body-item .uploadImg image{
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
	}
	.body-right {
		font-size: 28upx;
		color: #999999;
	
	}
	.body-item input{
		text-align: right;
		margin-right: 10rpx;
	}
	.margin-box {
		margin-top: 20upx;
	}
	
	.body-item2 {
		font-size: 32upx;
		color: #333333;
	
		background: #FFFFFF;
		padding: 15upx 24upx;
	}
	.type-box {
		display: flex;
		justify-content: center;
	}
	
	.type-item {
		width: 180upx;
		height: 58upx;
		text-align: center;
		line-height: 58upx;
		color: #666666;
		font-size: 26upx;
		border-radius: 29upx;
		border: 1upx solid #E6E6E6;
		margin: 24upx 34upx;
	}
	.active {
		color: #FFFFFF;
		background: linear-gradient(-90deg, rgba(50, 242, 226, 1), rgba(50, 226, 242, 1));
		border: 1upx solid #FFFFFF;
	}
	.class-room-promise{
		margin-top: 20px;
	}
</style>
